<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-cell
					title="预约时间"
					showArrow
					:desc="dateStr ? dateStr : '请选择'"
					@onClick="show = true"
				></pure-cell>

				<pure-month-modal
					:show="show"
					v-model="dateStr"
					@onCancel="show = false"
					@onConfirm="onConfirm"
				></pure-month-modal>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";

	const show = ref(false);
	const dateStr = ref("");

	function onConfirm(data) {
		dateStr.value = `${data.year}年${data.month}月`;
		show.value = false;
	}
</script>

<style lang="scss" scoped>
	.page {
	}
</style>
